<template>
	<view>
		<view class="useInfo">
			<view style="font-size: 30rpx; font-weight: 600; margin-top: 20rpx; color: #333;">
				投诉相关的举证：
			</view>
			<view v-for="(item,index) in disputeDetails" class="m-y-20" v-if="disputeDetails"
				style="background-color: #fff;  padding: 20rpx; border-radius: 20rpx;box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);">
				<view
					style="color: #666; font-size: 28rpx;background-color: #e8f4ff;padding: 10rpx;border-radius: 20rpx;">
					举证人:{{item.creatorName}}
				</view>
				<view
					style="margin-top: 10rpx; font-size: 26rpx; color: #333;word-wrap: break-word; word-break: break-all; white-space: pre-line;">
					举证说明：{{ item.description }}
				</view>
				<view class="m-t-10">
					<image :src="item1" mode="" class="w-150 h-130 " v-for="(item1,index) in item.images"
						@click="previewImage(item.images, index)"
						style="float: left;  margin-right: 20rpx">
					</image>
					<view style=" clear: both;   "></view>
				</view>
				<!-- <image :src="item1" mode="" class="w-150 h-130 flex" v-for="(item1,index) in item.imageUrls" >
				</image> -->
			</view>
		</view>
		<view class="text-c size-28 color-gray m-t-10" v-if="disputeDetails.length == total && disputeDetails.length>0">
			——— <text class="m-x-10">没有更多了</text> ———
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		// showProblemOrder,
		getDisputeDetails,  //协商历史
	} from '@/api/grab/grab.js'
	import {
		sortJsonKeys,
		sortAndFormatParams,
		dataGong,
		combine,
		
	} from '@/utils/encryption.js'
	let disputeDetails = ref([])
	//分页
	let funds = ref({
		transactionType: undefined,
		yearMonth: undefined,
		pageNum: 1,
		pageSize: 10
	})
	let total = ref()

	let orderId = ref()
	onLoad( (options) => {
			orderId.value = options.id
			// funds.value.pageNum = 1 // 重置页码
			getDisputeList()
	})
	
	const getDisputeList = async () => {
		// if (isLoading.value) return // 防止重复加载

		// isLoading.value = true
		uni.showLoading({
			title: '加载中...',
			mask: true
		})

		try {
			let data = {
				orderId: orderId.value,
				pageNum: funds.value.pageNum,
				pageSize: funds.value.pageSize
			}
			data = {
				...dataGong(),
				...data
			}

			const cenShi =sortAndFormatParams(data)
			const combineTrue = combine(cenShi, data.timestamp)

			let res = await getDisputeDetails(data, combineTrue)
			console.log('接口返回:', res)

			if (res.data.length > 0) {
				disputeDetails.value = [...disputeDetails.value, ...res.data]
			}
			total.value = res.total || 0
			console.log(total);
		} catch (error) {
			console.error('加载失败:', error)
			uni.showToast({
				title: error.message || '加载失败',
				icon: 'none'
			})
		} finally {
			// isLoading.value = false
			uni.hideLoading()
		}
	}
	// 滚动到底部加载更多
	onReachBottom(() => {
		if (total.value == disputeDetails.value.length) {
			return
		}
		funds.value.pageNum += 1
		getDisputeList()
	});
	
	const previewImage = (urls, currentIndex) =>{
		 uni.previewImage({
		      current: currentIndex, // 当前点击的图片索引（从0开始）
		      urls: urls, // 所有图片的 URL 数组
		      indicator: "number", // 显示数字指示器（可选）
		      // loop: true, // 是否循环预览（可选）
		    });
	}
</script>

<style>
	page {
		background-color: #f9f9f9;
		padding: 12rpx;
	}
</style>
